
<div class="product_preview_bigtiledown swiper-container product_preview_bigtiledown{{productId}}">
  <ul class="product_preview_bigtiledown-wrapper{{productId}} preview_bigtiledown_wrapper" style="width:100%">
    {% for image in previewImage %}
      {%- if image.alt == "" -%}
        {% assign image_alt = product | image_alt:'product'  %}
      {%- else -%}
          {% assign image_alt = image.alt %}
      {%- endif -%}
      {% if image.file_type == "video" %}
        <li class="swiper-slide">
          <div class="product_preview-video-container swiper-slide-video product_preview-video{{productId}}">
            <div style='position: relative;z-index: 10;' class="video-product_preview-box">
              <img style="width: 100%;height:100%;object-fit: cover;" class="video-product_preview-img" data-src="{{ image.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ image_alt }}"/>
              {%- include 'default_icon', icon:"video", height:"48", width:"48" -%}
            </div>
            <video src="{{image.params.url}}" controls="controls"></video>
          </div>
        </li>
      {% elsif image.file_type == "youtube" %}
        <li class="swiper-slide">
          <div class="product_preview-youtube-container">
            <iframe type="text/html" src="{{image.params.url}}?enablejsapi=1" frameborder="0"></iframe>
          </div>
        </li>
      {% else %}
        <li class="swiper-slide control-product_detail-picture_item" data-image-id="{{image.id}}">
          <a href="{{ productHref | default:'javascript:;'}}">
            <img style="width: 100%" data-src="{{ image.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}" alt="{{ image_alt }}"/>
          </a>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
  {% if previewImage.size > 1  %}
    <div class="bigtiledown-pagination">
      <div class="swiper-navigation product_preview_bigtiledown-prev-{{productId}}">
        {%- include 'default_icon', icon:"arrow-left", height:"18", width:"18" -%}
      </div>
      <div class="swiper-pagination swiper-pagination-{{productId}}"></div>
      <div class="swiper-navigation product_preview_bigtiledown-next-{{productId}}">
        {%- include 'default_icon', icon:"arrow-right", height:"18", width:"18" -%}
      </div>
    </div>
  {% endif %}
</div>
<script>
  $(function() {
    var productId = "{{productId}}";
    var video = $(".product_preview-video" + productId);
    var previewImage = {{previewImage|json}};
    video.click(function() {
      var video = $(this).find("video");
      var videoIcon = $(this).find(".video-icon");
      if ($(this).find(".video-product_preview-img")) {
        $(this).find(".video-product_preview-img").css('visibility', 'hidden');

      }
      video.css({'z-index': '20', "position": "absolute"})
      videoIcon.hide()
      video[0].play()
    })
    video.find("video").each(function(key, item) {
      var videoIcon = $(this).siblings(".video-product_preview-box").find(".video-icon");
      item.addEventListener("play", function() {
        $(this).css({'z-index': '20', "position": "absolute"})
        videoIcon.hide()
      })
      item.addEventListener("pause", function() {
        $(this).css({'z-index': '1', "position": "absolute"})
        videoIcon.show()
      })
    })
    {% if source == "product_detail" %}
      var swiperImg = $('.product_preview_bigtiledown' + productId).find(".swiper-slide img");
      swiperImg.click(function () {
        const JqThis = $(this);
        const parentIndex = swiperImg.index($(this));
        moi.pictureImages( previewImage.filter(item=>item.file_type === "image").map(el=>el.src) , parentIndex, JqThis)
      })
    {% endif %}
    if (moi.isMobile() && previewImage.length) {
      var swiperName = ".product_preview_bigtiledown-wrapper" + productId;
      $(swiperName).addClass("swiper-wrapper")
      var mySwiper = new Swiper('.product_preview_bigtiledown' + productId, {
        autoHeight: true,
        updateOnImagesReady: true,
        navigation: {
          nextEl: '.product_preview_bigtiledown-next-' + productId,
          prevEl: '.product_preview_bigtiledown-prev-' + productId
        },
        pagination: {
          el: '.swiper-pagination-' + productId,
          type: 'fraction'
        }
      })
      moi.addEvent('lazyImg', function(event) {
        if (event.params && previewImage.findIndex(item => item.src == event.params) > -1) {
          mySwiper.updateAutoHeight()
        }
      })
    }
  })
</script>